<template>
  <div class="tableBox">
    <el-table
      class="tableList"
      :data="tableData"
      border
      header-cell-class-name="tableTitle"
      style="width: 100%"
      :row-style="{height:'42px'}"
      max-height="503"
    >
      <el-table-column v-for="(item,i) in tableTit" :key="i" align="center" :prop="item.prop" :label="item.label" :width="item.width">
        <template slot-scope="scope">
          <span v-if="item.prop === 'pageLink'" class="btns" style="color:#02A7F0" @click="openView(scope.row[item.prop])">{{ scope.row[item.prop] }}</span>
          <span v-else-if="item.prop === 'status'" class="btns" @click="openPoP(scope.row,'status')">
            {{ ['未开始','进行中','已完成'][scope.row[item.prop]] }}
            <b class="el-icon-arrow-down" />
          </span>
          <span v-else-if="item.prop === 'pageType'">
            {{ ['','一级页面','非一级页面'][scope.row[item.prop]] }}
          </span>
          <span v-else style="margin-left: 10px;">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template slot-scope="scope">
          <span class="btns" style="color:#02A7F0" @click="openPoP(scope.row,'toChange')">编辑</span>
          <span class="btns" @click="openPoP(scope.row,'del')">删除</span>
          <span class="btns" style="color:#42b983" @click="downLoad(scope.row,'news')">下载</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      :current-page="pages.current"
      :page-size="pages.size"
      :total="total"
      :page-sizes="[10,20,50]"
      layout="sizes, prev, pager, next, jumper"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
    <p class="allData">共 {{ total }} 项数据</p>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableTit: [
        {
          id: 1,
          prop: 'id',
          label: 'id',
          width: '60'
        },
        {
          id: 2,
          prop: 'target',
          label: '目标页面'
          // width:'240',
        },
        {
          id: 3,
          prop: 'templatePage',
          label: '前端模板程序',
          width: '120'
        },
        {
          id: 4,
          prop: 'pageType',
          label: '页面类型',
          width: '120'
        },
        {
          id: 5,
          prop: 'pageTitle',
          label: '页面标题'
          // width:'150',
        },
        {
          id: 7,
          prop: 'createTime',
          label: '生成时间',
          width: '160'
        },
        {
          id: 8,
          prop: 'status',
          label: '状态',
          width: '120'

        }
      ],
      pages: {
        current: 1,
        size: 10
      }
    }
  },
  mounted() {
    console.log(this.total)
  },
  methods: {
    currentChange(page) {
      this.pages.current = page
      this.$emit('pagesChange', this.pages)
    },
    sizeChange(size) {
      this.pages.size = size
      this.pages.current = 1
      this.$emit('pagesChange', this.pages)
    },
    openPoP(data, type) {
      this.$emit('tableClick', data, type)
    },
    downLoad(data, type) {
      this.$emit('downLoad', data, type)
    },
    openView(link) {
      console.log(link)
    }
  }

}

</script>

<style lang="scss" scoped>
.tableBox {
    width: 96%;
    margin: 50px auto 0;
    height: 86%;
    position: relative;
    .tableList {
        border: 1px solid #D7D7D7;
    }
    .pagination{
        position: absolute;
        bottom: 5px;
        right: 30px;
        transform: scale(110%);
    }
    .allData{
        position: absolute;
        bottom: -5px;
        left: 30px;
    }
}
</style>
<style lang="scss">
.tableBox {
    .tableTitle {
        background-color: #F2F2F2 !important;
        color: #000;
        height: 42px;
        font-weight: 500;
        font-size: 14px;
        border: 1px solid #D7D7D7 !important;
    }
    .el-table td {
        border: 1px solid #D7D7D7 !important;
    }
    .el-pager{
        .active{
            background-color: #1890FF;
            border-radius: 3px;
            color: #fff;
        }
    }
    .btns{
        margin-left: 10px;
        cursor: pointer;
    }
}
</style>
